<template>
	<div class="lives-box-container" style="margin: 20rpx 0;">
		<view class="lives" @click="intoLives">
			<!-- <tx-avplayer v-if="isCurrent" ref="maxTxPlayer" class="maxTxPlayer" :url="pull.url" playModel="0"
				@statechange="onPlay" :style="playerStyle"></tx-avplayer> -->
			<!-- <video @click="intoLives" v-if="isCurrent" :controls="false" :is-live="true" :src="pull.url"
				:style="playerStyle" :autoplay="true"></video> -->
			<!-- <image :style="{height:windowHeight*scaleX+'px',flex:'1'}"
					src="https://static-cse.canva.cn/blob/62238/%E7%9B%B4%E6%92%AD%E8%A7%86%E9%A2%91%E5%B0%81%E9%9D%A2-6.jpg">
				</image> -->
			<image class="live-background" @error="imgLoadErr"
				:src="uni.$u.file.getMedieUrl(data.livesImage || data.avatar)">
			</image>
			<view class="live-text">
				<view class="title">
					<view class="" v-if="data.livesSessionName" style="background-color: rgba(0, 0, 0, 0.2);border-radius: 32rpx 32rpx 32rpx 0rpx;position: absolute;left:0;top: 0;padding: 10rpx;display: flex;align-items: center;">
						<view class="ellip text " >{{data.livesSessionName}}</view>
					</view>
					
				</view>
				<view class="time"style="background-color: rgba(0, 0, 0, 0.2);border-radius: 0rpx 15rpx 15rpx 32rpx;position: absolute;bottom:0;left: 0;height: 35rpx;display: flex;align-items: center;">
					<text class="text" style="margin-left: 15rpx;margin-right: 10rpx;">{{publicJS.timeZoneSwitching(data.lastLiveTime,'YYYY-MM-DD HH:mm')}}</text>
				</view>
			</view>
		</view>
		<view class="user-info">
			<view class="info" @click="goUser" >
				<image class="avatar" :src="uni.$u.file.getMedieUrl(data.avatar)" mode="" ></image>
				<view class="name">
					<text class="name-text">{{data.nickName}}</text>
				</view>
			</view>
			<view class="into-lives-btn">
				<imageForSize @click="intoLives" size="50" :src="require('@/static/images/video/play3.png')">
				</imageForSize>
				<!-- <text @click="intoLives" class="btn-text">{{uni.$t('media.intoPlayer')}}</text> -->
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			data: {
				default: () => ({}),
				type: Object
			},
			isCurrent: {
				default: false,
				type: Boolean
			},
			windowHeight: {
				default: 0,
				type: Number
			},
			scaleX: {
				default: 0.5,
				type: Number
			}
		},
		data() {
			return {
				pullUrl: 'rtmp://cssauth.chuananyun.com/live/1381253391933440?txSecret=469c642bbdca3dd58fe3ec942afd4c4e&txTime=650261D4',
				pull: {
					url: '',
					get: false,
				},
				uni
			}
		},
		watch: {
			isCurrent: {
				handler(val) {
					if ((!this.pull.get) && val) {
						console.log(this.data.anchorName, this.data.livesImage, uni.$u.file.getMedieUrl(this.data
							.livesImage));
						this.getPullUrlAjax()
					}
				},
				immediate: true
			}
		},
		mounted() {
			console.log(this.data, 'dataaaa');
		},
		computed: {
			playerStyle() {
				return {
					height: this.windowHeight * this.scaleX + 'px',
					// width: this.windowHeight * this.scaleX + 'px',
					flex: 1,
				}
			},
		},
		methods: {
			getPullUrlAjax() {
				console.log(this.data, '/app/anchor/lives/getPullUrl/');
				uni.$u.get('/app/anchor/lives/getPullUrl/' + this.data.userId).then(res => {
					this.pull.url = res.data.streamUrl
				})
			},
			intoLives() {
				uni.publicJS.intoPlayer({
					userName: this.data.anchorName,
					...this.data
				})
			},
			goUser() {
				uni.$u.route('/pages/user/components/userInfo?userId=' + this.data.userId)
			},
			imgLoadErr(res) {
				console.log(res, '加载失败')
				this.data.livesImage = ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.lives-box-container {
		position: relative;
		height: 380rpx;
		width: 316rpx;

		.lives {
			width: 316rpx;
			height: 316rpx;
			border-radius: 10rpx;
			overflow: hidden;
			flex-direction: column;
			position: relative;

			.live-background {
				width: 316rpx;
				height: 316rpx;
				border-radius: 30rpx;
				background-color: #ccc;
			}

			.live-text {
				top: 0;
				position: absolute;
				width: 316rpx;
				height: 316rpx;
				padding: 12rpx 20rpx 20rpx;
				justify-content: space-between;
				display: flex;
				flex-direction: column;

				.title {
					.text {
						font-size: 24rpx;
						color: #fff;
					}
				}

				.time {
					.text {
						font-size: 20rpx;
						color: #fff;
					}
				}
			}
		}
	}

	.user-info {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		flex: auto;
		height: 66rpx;
		display: flex;

		.info {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.avatar {
			width: 34rpx;
			height: 34rpx;
			border-radius: 34rpx;
		}

		.name {
			flex: 1;
			padding-left: 12rpx;
			width: 0;
			display: flex;
			.name-text {
				width: 0;
				flex: 1;
				font-size: 30rpx;
				color: #111118;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.into-lives-btn {
			padding: 0 10rpx;
			justify-content: center;

			.btn-text {
				font-size: 20rpx;
			}
		}
	}
	.ellip{
		lines: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 300rpx;
		white-space: nowrap;
	}
</style>